<script setup lang="ts">
import { Plus,Delete,Edit,InfoFilled} from '@element-plus/icons-vue'
import { getCategoryOneListAPI, getCategoryTwoListAPI, getCategoryThreeListAPI } from '@/api/product/attribute'
import { onMounted, ref} from 'vue'
import type { CategoryOneItem, CategoryTwoItem, CategoryThreeItem } from '@/types/product/attribute'
import { ElMessage, ElMessageBox } from 'element-plus';
import { getSpuListAPI,deleteSpuAPI } from '@/api/product/spu'
import type { SPUItem} from '@/types/product/spu'
import AddSPU from './components/addSPU.vue'
import AddSKU from './components/addSKU.vue'
import { getSkuListAPI } from '@/api/product/sku'
import { AddSkuParams } from '@/types/product/sku'

// 选定分类参数
const categoryParmas = ref({
    category1Id: '',
    category2Id: '' ,
    category3Id: '',
})

// 一级分类数据
const categoryOneList = ref<CategoryOneItem[]>([])

// 获取一级分类数据
const getCategoryOne = async() => {
    const res = await getCategoryOneListAPI()
    console.log(res);
    categoryOneList.value = res.data
}

// 选中一级分类
const handleCategory1 = () => {
    getCategoryTwo(categoryParmas.value.category1Id)
    categoryParmas.value.category2Id = ''
    categoryParmas.value.category3Id = ''
    categoryTwoList.value = []
    categoryThreeList.value = []
}

// 二级分类数据
const categoryTwoList = ref<CategoryTwoItem[]>([])

// 获取二级分类数据
const getCategoryTwo = async (id: string) => {
    const res = await getCategoryTwoListAPI(parseInt(id))
    categoryTwoList.value = res.data
}

// 选中二级分类
const handleCategory2 = () => {
    getCategoryThree(categoryParmas.value.category2Id)
    categoryParmas.value.category3Id = ''
    categoryThreeList.value = []
}

// 三级分类数据
const categoryThreeList = ref<CategoryThreeItem[]>([])

// 获取三级分类数据
const getCategoryThree = async (id: string) => {
    const res = await getCategoryThreeListAPI(parseInt(id))
    // console.log(res);
    categoryThreeList.value = res.data
}

// 选中三级分类
const handleCategory3 = async() => {
    getSPUList()
}

// 获取spu列表数据
const getSPUList = async () => {
    // console.log(categoryParmas.value.category3Id);
    
    tableLoading.value = true
    const res = await getSpuListAPI(pageParmas.value.page,pageParmas.value.limit,categoryParmas.value.category3Id)
    // console.log(res);
    spuList.value = res.data.records
    pageParmas.value.total = res.data.total
    tableLoading.value = false
}

// 表格加载效果
const tableLoading = ref(false)

// spu数据
const spuList =  ref<SPUItem[]>([])

// 分页参数
const pageParmas = ref({
    page: 1,
    limit: 3,
    total: 0
})

// 切换页码
const handleCurrentChange = (page: number) => {
    pageParmas.value.page = page
    getSPUList()
}

// 切换页数
const handleSizeChange = (limit: number) => {
        pageParmas.value.limit = limit
        getSPUList()
}

// 页面显示场景状态
const showScence = ref(0) // 0： spu列表 1：添加SPU 2：添加SKU

// 添加spu
const handleAddSPU = () => {
    showScence.value = 1
    editSpuId.value = ''
    categoryDisabled.value = true
    
}

// 取消添加spu
const handleCancelAddSPU = () => {
    showScence.value = 0
    editSpuId.value = ''
    categoryDisabled.value = false
    getSPUList()
}

// 修改spu
const handleEditSPU = (id: string | number) => {
    showScence.value = 1
    editSpuId.value = id
    categoryDisabled.value = true
}

// 修改spu属性的id
const editSpuId = ref<number | string>('')


// 删除spu数据
const handleDeleteSPU = (id: number | string) => {
    ElMessageBox.confirm("确定要删除该SPU吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then( async () => {
        const res = await deleteSpuAPI(id)
        console.log(res);
        if(res.code === 200) {
            ElMessage({
                type: "success",
                message: "删除成功",
            })
            // 重新加载数据
            getSPUList()
        }
    }).catch(() => {
        
    })
}

// 分类数据禁用
const categoryDisabled = ref(false)


// 添加sku
const handleAddSKU = (id: number | string,tmId: string | number) => {
    showScence.value = 2
    categoryDisabled.value = true
    // 调用子组件方法获取数据
    addSKURef.value.getSkuData(categoryParmas.value,id,tmId)
}

// 取消添加sku
const handleCancelAddSKU = () => {
    showScence.value = 0
    categoryDisabled.value = false
}

// 添加sku组件对象
const addSKURef = ref()

// 查看sku弹框组件
const dialogSkuShow = ref<boolean>(false)

// 点击查看sku
const handleShowSku = (row: SPUItem) => {
    dialogSkuShow.value = true
    getSkuList(row.id)
}

// 获取sku列表数据
const getSkuList = async (id: number | string) => {
    const res = await getSkuListAPI(id)
    console.log(res);
    skuList.value = res.data
}

// sku列表数据
const skuList = ref<AddSkuParams[]>([])

// 初始化
onMounted(() => {
    getCategoryOne()
})

</script>
<template>
    <div class="attribute">
        <el-card>
            <el-form style="width: 100%;" :inline="true" class="demo-form-inline">

                <el-form-item label="一级分类">
                <el-select
                    placeholder="请选择"
                    clearable
                    style="width: 200px;"
                    label-width="100px"
                    v-model="categoryParmas.category1Id"
                    @change=" handleCategory1"
                    :disabled="categoryDisabled"
                
                >
                    <el-option v-for="item in categoryOneList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                </el-form-item>
                <el-form-item label="二级分类">
                <el-select
                    placeholder="请选择"
                    clearable
                    style="width: 200px;"
                    v-model="categoryParmas.category2Id"
                    @change="handleCategory2"
                    :disabled="categoryDisabled"
                >
                <el-option v-for="item in categoryTwoList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                </el-form-item>
                <el-form-item label="三级分类">
                <el-select
                    placeholder="请选择"
                    clearable
                    style="width: 200px;"
                    v-model="categoryParmas.category3Id"
                    @change="handleCategory3"
                    :disabled="categoryDisabled"
                >
                <el-option v-for="item in categoryThreeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card v-show="showScence === 0">
            <template #header>
                <el-button  :disabled="!categoryParmas.category3Id" @click="handleAddSPU" :icon="Plus" type="primary" size="">添加SPU</el-button>
            </template>
            <el-table v-loading="tableLoading" :data="spuList" border style="width: 100%">
                <el-table-column align="center" :width="80" type="index"  label="序号" />
                <el-table-column align="center" :width="200" prop="spuName" label="SPU名称"></el-table-column>
                <el-table-column how-overflow-tooltip  header-align="center" label="SPU描述" prop="description"></el-table-column>
                <el-table-column align="center"  label="SPU操作">
                    <template v-slot="{  row }">
                        <el-button type="primary" :data="row" circle :icon="Plus" @click="handleAddSKU(row.id,row.tmId)"></el-button>
                        <el-button type="warning" circle :icon="Edit" @click="handleEditSPU(row.id)"></el-button>
                        <el-button type="info" circle :icon="InfoFilled" @click="handleShowSku(row)"></el-button>
                        <el-button type="danger" circle :icon="Delete" @click="handleDeleteSPU(row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
            v-model:currentPage="pageParmas.page"
            v-model:page-size="pageParmas.limit"
            style="margin-top: 20px;"
            :page-sizes="[3, 5, 7,10]"
            background="true"
            layout="prev, pager, next, jumper, -> ,total, sizes,"
            :total="pageParmas.total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            />
        </el-card>
        <!-- 添加SPU组件 -->
        <AddSPU @cancel="handleCancelAddSPU" :categoryId="categoryParmas.category3Id" :spuId="editSpuId" v-show="showScence === 1"></AddSPU>
        <!-- 添加SPU组件 -->
        <!-- 添加SKU组件 -->
        <AddSKU ref="addSKURef" @cancel="handleCancelAddSKU" v-show="showScence === 2"></AddSKU>
        <!-- 添加SKU组件 -->
        <!-- 查看sku弹框组件 -->
        <el-dialog v-model="dialogSkuShow">
            <el-table :data="skuList ">
                <el-table-column label="sku名称" prop="skuName"></el-table-column>
                <el-table-column label="sku价格" prop="price"></el-table-column>
                <el-table-column label="sku重量" prop="weight"></el-table-column>
                <el-table-column label="图片">
                    <template v-slot="{ row }">
                        <img :src="row.skuDefaultImg" alt="" style="width: 100px ; height: 100px;">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 查看sku弹框组件 -->
    </div>
</template>

<style scoped>
.attribute {
    .el-card {
        width: 100%;
        align-items: center;
        margin-bottom: 20px;
    }
}
</style>@/api/product/attribute@/types/product/attribute